<template>
    <p style="line-height: 3.125rem; font-size: 1rem; font-weight: bold" class="main_text">子类关系管辖</p>
    <div class="main">
        <!-- #################################### 查询 #################################### -->
        <!-- <div class="top mb20 p20">
            <el-form :model="inquireData" class="df aic fww">
                <el-form-item label="父节点：" class="mr20">
                    <el-select v-model="inquireData.name" placeholder="父节点"  style="width: 7.5rem;">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item>
                <el-form-item label="子节点：" class="mr20">
                    <el-select v-model="inquireData.name" placeholder="子节点"  style="width: 7.5rem;">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <div class="df">
                        <el-button type="primary">查询</el-button>
                        <el-button type="primary" plain>重置</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div> -->
        <!-- #################################### 表单 #################################### -->
        <div class="content p20">
            <el-button type="primary" @click="centerDialogVisible = true">添加</el-button>
            <el-button type="danger" plain @click="AllDelete">批量删除</el-button>
            <el-table @selection-change="handleSelectionChange" :data="tableData" style="width: 100%" class="mt20"
                :header-cell-style="{ background: '#f0f6fe' }" max-height="440">
                <el-table-column type="selection" width="50" />
                <el-table-column label="ID" prop="id" />
                <el-table-column label="父节点" prop="parentType" />
                <el-table-column label="子节点" prop="childType" />
                <el-table-column label="操作" fixed="right" width="120">
                    <template #default="props">
                        <el-button size="small" link type="primary" @click="edit(props.row)">修改</el-button>
                        <el-button size="small" link type="danger" @click="deleteData(props.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- #################################### 分页 #################################### -->
          <smartPager
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="Number(total)"
            @change="handleCurrentChange" />
            <!-- #################################### 添加蒙层 #################################### -->
            <el-dialog v-model="centerDialogVisible" width="40%" align-center>
                <template #header>
                    <div class="df aic">
                        <el-icon style="color: #fff;" size="20">
                            <Edit />
                        </el-icon>&nbsp;
                        <p style="color: #fff;">添加关系</p>
                    </div>
                </template>
                <el-form :model="AddData" label-width="100" label-position="left" class="df fdc aic">
                    <el-form-item label="父节点：" style="width: 60%;">
                        <el-input v-model="AddData.parentType" placeholder="父节点" />
                    </el-form-item>
                    <el-form-item label="子节点：" style="width: 60%;">
                        <el-input v-model="AddData.childType" placeholder="子节点" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <el-button type="primary" plain>取消</el-button>
                    <el-button type="primary" @click="AddList">添加</el-button>
                </template>
            </el-dialog>

            <!-- #################################### 修改关系 #################################### -->
            <el-dialog v-model="editCenterDialogVisible" width="40%" align-center>
                <template #header>
                    <div class="df aic">
                        <el-icon style="color: #fff;" size="20">
                            <Edit />
                        </el-icon>&nbsp;
                        <p style="color: #fff;">修改关系</p>
                    </div>
                </template>
                <el-form :model="EditData" label-width="100" label-position="left" class="df fdc aic">
                    <el-form-item label="父节点：" style="width: 60%;">
                        <el-input v-model="EditData.parentType" placeholder="父节点" />
                    </el-form-item>
                    <el-form-item label="子节点：" style="width: 60%;">
                        <el-input v-model="EditData.childType" placeholder="子节点" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <el-button type="primary" plain>取消</el-button>
                    <el-button type="primary" @click="EditAddData">添加</el-button>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
import { RequestNodeAllowedChildrenTypeSave, RequestNodeAllowedChildrenTypeDel, RequestNodeAllowedChildrenTypepostList, RequestNodeAllowedChildrenTypeGetlistlimit } from '@/api/path/index.js'
import { ElMessage } from 'element-plus'
import { Edit } from '@element-plus/icons-vue'
import { ref } from 'vue'
const editCenterDialogVisible = ref<any>(false)
const centerDialogVisible = ref<any>(false)
const inquireData = ref<any>({
    value1: '',
    resource: '',
    name: '',
})
/* 添加的弹窗 */
const AddData = ref<any>({
    parentType: '',
    childType: '',
})
/* 修改弹窗 */
const EditData = ref<any>({
    parentType: '',
    childType: '',
})
/* 表格 */
const tableData = ref<any>([{
    id: 1,
    parentType: 'as',
    childType: 'as',
}])
/* ************************ 分页获取数据 ************************ */
const total = ref<any>(10)
const currentPage = ref(1)
const pageSize = ref(10)
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    getData()
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    getData()
}
// const total = ref()
const getData = () => {
    RequestNodeAllowedChildrenTypeGetlistlimit(currentPage.value, pageSize.value).then((res: any) => {
        tableData.value = res.resultObj.data
        total.value = res.resultObj.total
    })
}
getData()
/* ************************ 添加数据 ************************ */
const AddList = () => {
    RequestNodeAllowedChildrenTypeSave(AddData.value).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success(res.msg)
            centerDialogVisible.value = false
            AddData.value.parentType = ''
            AddData.value.childType = ''
            getData()
        } else {
            ElMessage.error(res.msg)
        }
    })
}
/* ************************ 单个删除 ************************ */
const deleteData = async (id: any) => {
    RequestNodeAllowedChildrenTypeDel(id).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success(res.msg)
            getData()
        } else {
            ElMessage.error(res.msg)
        }
    })
}
/* ************************ 批量删除 ************************ */
const ids = ref<any>([])
const handleSelectionChange = (val: any) => {
    val.forEach((item: any) => ids.value.push(item.id));
}
const AllDelete = () => {
    const formimgs = new FormData()
    formimgs.append('ids', ids.value)
    RequestNodeAllowedChildrenTypepostList(formimgs).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success(res.msg)
            getData()
        } else {
            ElMessage.error(res.msg)
        }
    })
}
/* ************************ 修改 ************************ */
const edit = (row: any) => {
    editCenterDialogVisible.value = true
    EditData.value = row
}
const EditAddData = () => {
    RequestNodeAllowedChildrenTypeSave(EditData.value).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success(res.msg)
            editCenterDialogVisible.value = false
            getData()
        } else {
            ElMessage.error(res.msg)
        }
    })
}
</script>









<style scoped lang="scss">
.main {
    width: 100%;

    .top {
        width: 100%;
        background-color: #fff;
    }

    .content {
        width: 100%;
        background-color: #fff;
    }
}

/* 弹出框样式 */
::v-deep .el-overlay {
    .el-dialog__header {
        background-color: #116cf8;
        margin-right: 0;
    }

    .el-dialog__title {
        color: #fff;
    }

    .el-icon svg {
        color: #fff;
    }
}
</style>
